<template>
  <!-- 头部 -->
  <div class="head">
    <!-- 头部左边 -->
    <div class="h_r">
      <i class="h_r_icon"></i>
      <!-- <img src="@/image/1.jpg" alt="" /> -->
      <a href="javascript:;">{{name}}</a>
    </div>
    <!-- 头部右边 -->
    <div class="h_l">
      <a href="javascript:;">更多</a>
      <i class="h_l_icon"></i>
      <!-- <img src="./image/2.png" alt="" /> -->
    </div>
  </div>
</template>

<script>
export default {
    name: 'HeadArea',
    props:['name']
};
</script>

<style lang="less" scoped>

.head {
  // pa-top: 10px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  width: 687px;
  min-width: 300px;
  height: 35px;
  background-color: rgb(245, 245, 245);
  border-bottom: 2px red solid;
  margin-top: 10px;
  // border-bottom: 2px solid #c10d0c;

  // position: relative;
  .h_r {
    display: flex;
    justify-content: center;
    align-items: center;
    a {
      color: #000;
    }
    img {
      height: 30px;
      width: 30px;
      line-height: 35px;
    }
    .h_r_icon {
      width: 30px;
      height: 30px;
      margin-left: 4px;
      vertical-align: middle;
      background: url("~@/assets/image/index.png") no-repeat 0 9999px;
      background-position: -224px -156px;
    }

    .h_r_li {
      // margin-right: 50px;
      padding-left: 15px;
      display: flex;
      span {
        margin: 0 10px;
      }
    }
  }
  .h_l {
    display: flex;
    justify-content: center;
    align-items: center;
    a {
      font-size: 10px;
      color: #000;
    }

    .h_l_icon {
      /* display: inline-block; */
      width: 12px;
      height: 12px;
      margin-left: 4px;
      vertical-align: middle;
      background: url("~@/assets/image/index.png") no-repeat 0 9999px;
      background-position: 0 -240px;
    }
  }
}
</style>
